<script setup lang="ts">
import { nextKey } from '@/widgets/util'
import { ref } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: 'title'
  }
})

const name = ref('12312')
const root = ref()
function changeName() {
  name.value = nextKey()
}
defineExpose({
  name,
  changeName
})
</script>
<template>
  <div ref="root">
    <div>title:{{ title }}</div>
    <div>{{ name }}</div>
    <button @click="changeName">change name</button>
    <slot />
  </div>
</template>
